<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
    <div id="d1">
        用户名:<input type="text" v-model="user.username"/>
        密码:<input type="password" v-model="user.password"/>

        <input type="button" value="get" @click="f1"/>
        <input type="button" value="get" @click="f2"/>
        <input type="button" value="post" @click="f3"/>
        <input type="button" value="put" @click="f4"/>
        <input type="button" value="delete" @click="f5"/>
    </div>
</body>
<script>
    new Vue({
        el:"#d1",
        data:{
            user:{
                username:"abc",
                password:"123",
            }
        },
        methods:{
            f1(){
                var u=this.user;
                // axios.get("http://127.0.0.1:8080/users/f1").then((r)=>{
                //     console.log(r.data);
                // });

                axios.get("http://127.0.0.1:8080/users/f1").then(function(response){
                    console.log(response.data);
                    u.username=response.data.username;
                    u.password=response.data.password;
                });
            },
            f2(){
                var u=this.user;
                // axios.get("http://127.0.0.1:8080/users/f1").then((r)=>{
                //     console.log(r.data);
                // });

                axios.get("http://127.0.0.1:8080/users/f2",{
                    params:this.user
                }).then(function(response){
                    console.log(response.data);
                    u.username=response.data.username;
                    u.password=response.data.password;
                });
            },
            f3(){
                var u=this.user;

                var params=new URLSearchParams();
                params.append("username",this.user.username)
                params.append("password",this.user.password);

                axios.post("http://127.0.0.1:8080/users/f2",params).then(function(response){
                    console.log(response.data);
                    u.username=response.data.username;
                    u.password=response.data.password;
                });
            },
            f4(){
                var u=this.user;

                var params=new URLSearchParams();
                params.append("username",this.user.username)
                params.append("password",this.user.password);

                axios.put("http://127.0.0.1:8080/users/f2",params).then(function(response){
                    console.log(response.data);
                    u.username=response.data.username;
                    u.password=response.data.password;
                });
            },
            f5(){
                var u=this.user;

                axios.delete("http://127.0.0.1:8080/users/f2",{
                    params:this.user
                }).then(function(response){
                    console.log(response.data);
                    u.username=response.data.username;
                    u.password=response.data.password;
                });
            }


        },
    });
</script>
</html>